<template>
  <div class="detail">
    <div :style="bgImage">
      <div v-if="currentPosition" class="child">
        当前垛位:{{ currentPosition.StockNo }}
        <span v-if="currentPosition?.PosType != 'P'">材料号:{{ currentPosition.MatNo }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'terminal-crane-detail',

  props: {
    info: {
      type: String,
      required: true,
    },

    currentPosition: {
      type: Object as PropType<any>,
      required: true,
    },
  },

  setup(props) {
    const craneInfo = ref<Record<string, any>>({});

    const bgImage = computed(() => {
      // if (props.currentPosition.length === 1 && !props.currentPosition[0]?.MatNo) {
      //   return "width:80%;height:80%; margin: auto; background-image:url('images/terminal-crane/stock.png');background-size: contain; background-repeat: no-repeat;background-position: center;";
      // } else if (props.currentPosition.length === 1 && props.currentPosition[0]?.MatNo) {
      //   return "width:100%;height:80%; margin: auto;  background-image:url('images/terminal-crane/stock-mat.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      // } else if (props.currentPosition.length > 1) {
      //   const nonEmptyCount = props.currentPosition.filter(obj => obj.MatNo !== null && obj.MatNo !== '').length;
      //   if (nonEmptyCount === 1) {
      //     return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_1.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      //   } else if (nonEmptyCount === 2) {
      //     return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_2.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      //   } else if (nonEmptyCount === 3) {
      //     return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_3.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      //   } else if (nonEmptyCount === 4) {
      //     return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_4.png');background-size: contain;background-repeat: no-repeat;  background-position: center;";
      //   } else {
      //     return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      //   }
      // } else {
      //   return '';
      // }

      if (!props.currentPosition) {
        return;
      }

      if (props.currentPosition?.PosType === 'S1' && !props.currentPosition?.MatNo) {
        return "width:80%;height:80%; margin: auto; background-image:url('images/terminal-crane/stock.png');background-size: contain; background-repeat: no-repeat;background-position: center;";
      } else if (props.currentPosition?.PosType === 'S1' && props.currentPosition?.MatNo) {
        return "width:100%;height:80%; margin: auto;  background-image:url('images/terminal-crane/stock-mat.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      } else if (props.currentPosition?.PosType === 'P') {
        const nonEmptyCount = props.currentPosition.MatNo ? props.currentPosition.MatNo.split(',').length : 0;
        console.log(nonEmptyCount);
        if (nonEmptyCount === 1) {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_1.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
        } else if (nonEmptyCount === 2) {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_2.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
        } else if (nonEmptyCount === 3) {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_3.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
        } else if (nonEmptyCount === 4) {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_4.png');background-size: contain;background-repeat: no-repeat;  background-position: center;";
        } else if (nonEmptyCount > 4) {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car_4.png');background-size: contain;background-repeat: no-repeat;  background-position: center;";
        } else {
          return "width:100%;height:100%; margin: auto;  background-image:url('images/terminal-crane/car.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
        }
      } else if (['E', 'T', 'C'].includes(props.currentPosition?.PosType) && props.currentPosition?.MatNo) {
        return "width:100%;height:80%; margin: auto;  background-image:url('images/terminal-crane/unit-mat.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      } else if (['E', 'T', 'C'].includes(props.currentPosition?.PosType) && !props.currentPosition?.MatNo) {
        return "width:100%;height:80%; margin: auto;  background-image:url('images/terminal-crane/unit.png');background-size: contain; background-repeat: no-repeat;  background-position: center;";
      } else {
        return '';
      }

      return '';
    });

    return {
      craneInfo,
      bgImage,
    };
  },
});
</script>
<style lang="scss" scoped>
.detail {
  width: 62%;
  height: 100%;
  padding: 16px;
  // background-color: rgba(132, 113, 113, 0.2);
  background-image: url('assets/terminal-crane/dynamic-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  position: relative;

  // .car {
  //   width: 100%;
  //   height: 100%;
  //   background-image: url('/images/bg_car.png');

  // }
}

// .parent {
// }

.child {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  // border: 1px solid #000;
  padding: 10px 80px;
  font-size: 20px;
  white-space: nowrap;
}
</style>
